<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 点击事件
 * 注意事项，同一个点击事件只能注册一次，如果多次注册，只生效最后一次的事件
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer");

  // 加入一些实体
  viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(-100.0, 10.0),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED,
    },
  });
  viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(-90.0, 80.0),
    point: {
      pixelSize: 30,
      color: Cesium.Color.YELLOW,
    },
  });

  initEvent(viewer);
});

// 实例化点击事件
function initEvent(viewer) {
  // 1.设置触发器
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  // 2. 注册事件
  handler.setInputAction((event) => {
    console.log("左键点击事件event", event);
    const pick = viewer.scene.pick(event.position); // pick 是点击的物体
    console.log("pick", pick);
    if (Cesium.defined(pick)) {
      console.log("点击到了物体", pick);
    } else {
      console.log("未点击到物体");
    }
    // 将点击屏幕坐标转化为
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


  // 3.注销事件
  // handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
